import React, { useState } from 'react'

import { Layout, Avatar, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { Header } = Layout;


const onClick = (val: any) => {
    console.log(val);
};

const menu = (
    <Menu onClick={onClick}>
        <Menu.Item key="1">
            <Link to="/user">用户中心</Link>
        </Menu.Item>
        <Menu.Item key="2">
            <Link to="/">产品中心</Link>
        </Menu.Item>
        <Menu.Item key="2">个人中心</Menu.Item>
        <Menu.Item key="3">退出登录</Menu.Item>
    </Menu>
);
const HomeHeader: React.FC = (props: any) => {
    console.log(props);
    return (
        <Header>
            <div className='header-container'>
                <div className="logo">
                    mock-server
                </div>
                <div className='user'>
                    <Dropdown overlay={menu}>
                        <div>
                            <Avatar className="ant-dropdown-link"
                                style={{ backgroundColor: "transparent", verticalAlign: 'middle' }}
                                size={{ xs: 60, sm: 60, md: 60, lg: 60, xl: 60, xxl: 60 }}
                            >
                                admin
                            </Avatar>
                        </div>
                    </Dropdown>
                </div>
            </div>
        </Header>
    )
}


export default HomeHeader;
